<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QEvent</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" media="screen" />
    
    <style type="text/css">
        * { font-family: 'Trebuchet MS' , 'Geneva CE' , lucida, sans-serif; }
        body { font-size: 90%; padding: 20px 40px;}
        li { margin: 6px; margin-bottom: 21px; }
        button { display: block; margin: .5em 1em; font-size: 80%;}
    </style>

    <script src="Source/QEvent.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
        QEvent.add(window, 'domready', function() {
            
            var ctn = document.getElementById('container'),
                inner = document.getElementById('inner'),
                removeBoxListeners = document.getElementById('removeBoxListeners'),
                testCustomOnObjects = document.getElementById('testCustomOnObjects');

            /* 
            test DOM event with stop
            */
            function ctnClick() {
                inner.innerHTML += 'container ';
            };
            function innerClick(e) {
                inner.innerHTML += 'inner ';
                e.stop(); // comment to see bubbling
            };
            QEvent.add(ctn, 'click', ctnClick);
            QEvent.add(ctn, 'click', ctnClick); // test repeated adding same twins
            QEvent.add(inner, 'click', innerClick);

            /*
            test event removing
            */
            QEvent.add(removeBoxListeners, 'click', function() {
                QEvent.remove(ctn, 'click', ctnClick);
                QEvent.remove(inner, 'click', innerClick);
            })

            /*
            test custom event on JavaScript object
            */
            var Cat = function(name) {
                this.name = name;
            };
            var kitty = new Cat('Kitty');
            function onKittyPurr(friend) {
                testCustomOnObjects.innerHTML = this.name + ' is happy. She see: ' + friend + ' ' + new Date().getTime();
                testCustomOnObjects.style.fontWeight = 'bold';
            }
            QEvent.add(kitty, 'purr', onKittyPurr);
            QEvent.add(testCustomOnObjects, 'click', function() {
                QEvent.fire(kitty, 'purr', 'Sandy');
            });
            
            // custom event remove test
            /*setTimeout(function() {
                var i = 5;
                QEvent.remove(kitty, 'purr', onKittyPurr);
            }, 3000);*/

            /*
            DOM custom events
            */

            // keyenter
            function keyenter(e) {
                this.value = 'pressed: ' + e.key;
            }
            QEvent.add(document.getElementById('testKeyEnter'), 'keyenter', keyenter);

            /*setTimeout(function() {
            QEvent.remove(document.getElementById('testKeyEnter'), 'keyenter', keyenter);                
            }, 2000);*/

            // mouseOverOut
            function mouseOverOut(e) {
                this.style.color = e.isOver() ? 'red' : '';
            }
            QEvent.add(document.getElementById('mouseOverOutTest'), 'mouseOverOut', mouseOverOut);

            /*setTimeout(function() {
                QEvent.remove(document.getElementById('mouseOverOutTest'), 'mouseOverOut', mouseOverOut);
            }, 2000);*/

            // mouseenter/leave
            var output = document.getElementById('output');
            function mouseenter(e) {
                output.innerHTML += 'over';
            };
            function mouseleave(e) {
                output.innerHTML += 'out';
            };
            QEvent.add(document.getElementById('mouseEnterAndLeaveTest'), {
                mouseenter: mouseenter,
                mouseleave: mouseleave
            });
            
            /*setTimeout(function() {
                QEvent.remove(document.getElementById('mouseEnterAndLeaveTest'), {
                    mouseenter: mouseenter,
                    mouseleave: mouseleave
                });
            }, 2000);*/
            
            // mousehover
            function mousehover(e) {
                document.getElementById('output2').innerHTML += e.isOver() ? 'enter' : 'leave';
            };
            QEvent.add(document.getElementById('mousehoverTest'), {
                mousehover: mousehover
            });
            
            /*setTimeout(function() {
                QEvent.remove(document.getElementById('mousehoverTest'), {
                    mousehover: mousehover
                });
            }, 2000);*/

            // mousewheel
            function mousewheelTest(e) {
                document.getElementById('mousewheelOutput').innerHTML = e.wheel;
                e.stop();
            }
            QEvent.add(document.getElementById('mousewheel'), 'mousewheel', mousewheelTest);
            
            /*setTimeout(function() {
                QEvent.remove(document.getElementById('mousewheel'), 'mousewheel', mousewheelTest);
            }, 2000);*/
            
            // beforeunload
            QEvent.add(window, 'beforeunload', function() {
                return '-- beforeunload test --';
            });            
            
            // clickout
            function onClickout() {
                document.getElementById('clickoutTest').innerHTML += '<br /> Thanx';
            }
            QEvent.add(document.getElementById('clickoutTest'), 'clickout', onClickout);                        
            
            // addOnce
            var addOnceBtn = document.getElementById('addOnceTest');
            function onClickOnce(e) {
                addOnceBtn.innerHTML = 'Done.' + new Date().getTime();
                e.stop();
            }            
            QEvent.addOnce(addOnceBtn, 'click', onClickOnce);                                                
            
            // focus blur test bubbling test
            var focusBlurTestEl = document.getElementById('focusBlurTest');
            function onFocus(e) {
                focusBlurTestEl.value += 'focus';
            }
            function onBlur(e) {
                focusBlurTestEl.value += 'blur';
            }                 
            QEvent.add(focusBlurTestEl.parentNode, {
                focus: onFocus,
                blur: onBlur
            });            
        });
        
    </script>

</head>
<body>
    <h2>QEvent v0.95 - a powerful tiny extensible standalone event library for elements and objects</h2>
    <p>License: MIT-style license.<br />
    Copyright: Copyright (c) 2008 Daniel Steigerwald, daniel@steigerwald.cz</p>
    <div id='container' style='padding: 21px 60px; background-color: Olive; width: 240px; '>
        <div id='inner' style='width: 250px; height: 50px; background-color: Teal'>
        </div>
    </div>
    <ul>
        <li>Click to box and inner box (bubbling is stoped).
            <button id='removeBoxListeners'>click to remove box listeners.</button>
        </li>
        <li>Event on JavaScript object
            <button id='testCustomOnObjects'>test custom event on JavaScript object</button>
        </li>
    </ul>
    
    <h3>Custom Events</h3>
    <h4>1. keyenter</h4>
    <input id="testKeyEnter" type="text" value="press enter" />
    
    <h4>2. mouseOverOut</h4>
    <div id="mouseOverOutTest" style="padding: .5em 1em; background-color: silver; width: 170px;">
    mouse over/out me
    </div>
    
    <h4>3. mouseenter/mouseleave</h4>
    <div id="mouseEnterAndLeaveTest" style="padding: 1em; background-color: silver; width: 270px;">
        <h5 id='output' style="width: 190px; height: 30px; overflow: hidden; background-color: Lime">
        </h5>
        mouseoverme, inner div is ignored
    </div>
    
    <h4>4. mousehover</h4>
    <div id="mousehoverTest" style="padding: 1em; background-color: silver; width: 270px;">
        <h5 id='output2' style="width: 190px; height: 30px; overflow: hidden; background-color: Lime">
        </h5>
        mouseoverme, inner div is ignored
    </div>
    
    <h4>5. mousewheel</h4>
    <div id='mousewheel' style="padding: 4px; background-color: silver; width: 240px;">
    <label>mousewheel here to see value:</label> <strong id='mousewheelOutput'></strong>
    </div>
    
    <h4>6. domready, see source</h4>   
    <!-- domready test -->
    <img style='height: 50px;' src='http://www.lhs.berkeley.edu/hou/get_images/images/featuredimages/eta-carinae-nebula-16bitReagan.jpg' />
    
    <h4>7. beforeunload, press F5, see source</h4> 
    
    <h4>8. clickout </h4>     
    <div id='clickoutTest' style='width: 150px; height: 50px; background-color: red'>
        Click around me.
    </div>
    
    <h3>Flash events</h3>
    <button id='addOnceTest'>Click me</button>    
    
    <h3>Focus blur bubbling fix</h3>
    <fieldset>
    <input id='focusBlurTest' type="text" />    
    </fieldset>
    
</body>
</html>
